<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
    .top {
        height: 25px;
        line-height: 25px;
        position: relative;
    }

    .top span a {
        color: #F00;
    }

    .top span a:hover {
        color: #0C3;
    }

    .topRight {
        position: absolute;
        top: 0;
        right: 0;
        color: #747474;
    }

    .top .topRight a {
        color: #747474;
    }

    .top .topRight a:hover {
        color: #F00;
    }

    .lsg {
        padding: 5px 0;
        position: relative;
    }

    /*logo*/
    .logo {
        width: 150px;
        height: 100px;
    }

    /*sub*/
    .subBox {
        width: 689px;
        height: 34px;
        position: absolute;
        left: 300px;
        top: 35px;
    }

    .subBoxDiv {
        width: 689px;
        height: 34px;
        position: relative;
    }

    .hotWord {
        position: absolute;
        height: 20px;
        line-height: 20px;
        top: 38px;
        left: 80px;
        width: 380px;
    }

    /*gouwuche*/
    .gouwuche {
        width: 260px;
        position: absolute;
        right: 0;
        top: 35px;
    }

    .gouCar {
        padding: 0 10px;
        width: 150px;
        height: 40px;
        border: #E6E6E6 1px solid;
        line-height: 31px;
        font-size: 16px;
        color: #747474;
        margin-bottom: 1px;
    }

    .gouCar a {
        color: #747474;
    }

    .gouCar a:hover {
        color: #F00;
    }

    .red {
        color: #F00;
    }

</style>
<div style="background: white">

    <div class="top">
        <c:if test="${empty sessionScope.user}">
            <span>您好！欢迎来到并夕夕商城 请&nbsp;<a href="${pageContext.request.contextPath}/uto_login">[登录]</a>&nbsp;<a
                    href="../register.html">[注册]</a></span>
        </c:if>
        <c:if test="${not empty sessionScope.user}">
            <span>欢迎 ${sessionScope.user.getNickname()} 来到并夕夕商城! <a href="${pageContext.request.contextPath}/user/LoginOut">退出登录</a></span>
        </c:if>
        <span class="topRight">
            <a href="../vip.html">我的并夕夕</a>&nbsp;|
            <a href="${pageContext.request.contextPath}/user_orderDetails?userIds=${sessionScope.user.getId()}">我的订单</a>&nbsp;|
            <a href="../login.html">会员中心</a>&nbsp;|
            <a href="../contact.html">联系我们</a>
       </span>
    </div>

    <div class="lsg">
        <h1 class="logo">
            <a href="${pageContext.request.contextPath}/userIndex">
                <img style="height: 110px;width: 230px;" src="${IMG_SERVER}/sys/frontend/logo.png"/>
            </a>
        </h1>

        <form action="#" class="subBox" method="get">
            <div class="subBoxDiv">
                <form action="${pageContext.request.contextPath}/goods/list" method="get">

                    <div class="layui-form-item">
                        <div class="layui-input-group" style="width: 700px ; padding-left: 150px">
                            <input type="text" name="keywords" id="searchInput" placeholder="请输入商品名称搜索"
                                   class="layui-input"
                                   style=" border-color: #f00;  border-width: 2px; " lay-affix="search"
                                   lay-filter="search">
                            <div class="layui-input-split layui-input-suffix submit"
                                 style="cursor: pointer;border-color: rgba(248,52,52,0.96);  border-width: 2px; background:rgba(248,64,64,0.96) ">
                                <i class="layui-icon layui-icon-search"></i>
                            </div>
                        </div>
                    </div>

                </form>
                <div class="hotWord">
                    <c:forEach items="${categoryList}" var="category">
                        <a href="${pageContext.request.contextPath}/goods/list?categoryId=${category.key}">${category.value}</a>&nbsp;
                    </c:forEach>
                </div>
            </div>
        </form>

        <div class="gouwuche">
            <div class="gouCar">
                <a href="${pageContext.request.contextPath}/user/cartItem/userCart">
                    <img height="20"
                         src="${IMG_SERVER}/sys/frontend/gouimg.png"
                         style="position:relative;top:6px;"
                         width="19"/>
                </a>
                &nbsp;
                <a href="${pageContext.request.contextPath}/user/cartItem/userCart">已选择去结算</a> <img height="8" src="${IMG_SERVER}/sys/frontend/youjian.jpg"
                                                        width="5"/>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/static/', //拓展模块的根目录
    }).extend({
        formTable: '/formTable/formTable'
    });
    layui.use(['table', 'form', 'formTable'], function () {
        var form = layui.form;
        // 渲染表格
        const formTable = layui.formTable;
        formTable.render({
            elem: 'input[name=keywords]',
            url: "${pageContext.request.contextPath}/autoComplete",
            width: 530,
            skin: 'nob',
            table: {
                cols: [
                    [
                        {field: 'id', hide: true},
                        {field: 'name', title: '为你搜索到以下商品'},
                    ]
                ],
                height: 180,
                rowDouble: (data) => {
                    //触发行双击事件
                    window.location.href = '${pageContext.request.contextPath}/goodsDetails?id=' + data.id;
                }
            },
        });


        // 点击图标搜索
        $('.submit').on('click', function () {
            submitForm();
        });

        // 提交表单的函数
        function submitForm() {
            var keywords = $('#searchInput').val().trim(); // 获取搜索框的值，并去除首尾空格
            if (keywords !== "") {
                window.location.href = '${pageContext.request.contextPath}/searchGoodsListByKeywords?keywords=' + keywords;
            } else {
                alert("请输入关键字");
            }
        }


    });
</script>